import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:xview/utils/dimension.dart';

class XButton extends StatefulWidget {
  String type ;
  bool plain;
  bool disabled;
  Color? color;
  String title;
  bool showRipples;
  String loadingMod;
  bool loading;

  XButton({
    this.type = 'primary', // default(默认)、primary、success、warning、error
    this.plain = false, // 通过plain值设置是否镂空
    this.disabled = false, // 通过disabled值设置是否禁用
    this.color,
    this.title = '按钮',
    this.showRipples = true, //是否展示水波纹效果
    this.loadingMod = 'circle', //loading类型: 圆圈：circle,旋转：spinner
    this.loading = false,
  });

  @override
  State<StatefulWidget> createState() {
    return _xButtonState();
  }
}

class _xButtonState extends State<XButton> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              color: widget.disabled || !widget.showRipples || widget.loading?getColor():Colors.transparent,
              child: Opacity(
                opacity: widget.disabled?0.6:1,
                child: Ink(
                  decoration: BoxDecoration(
                    color: getColor(),
                    borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(3))),
                    border: Border.all(width: getBorder(),color: getBorderColor())
                  ),
                  child: InkWell(
                    borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(3))),
                    canRequestFocus: !widget.disabled,
                    radius: 200,
                    splashColor: Color.fromRGBO(255, 255, 255, 0.3),
                    onTap: () {
                      if(!widget.disabled && !widget.loading){
                        print('btn-click');
                      }
                    },
                    child: Container(
                      constraints: BoxConstraints(
                        minWidth: Dimension(context).toPx(82),
                      ),
                      padding: EdgeInsets.symmetric(vertical: Dimension(context).toPx(10),horizontal: Dimension(context).toPx(12)),
                      child: Center(
                        child: Row(
                          children: [
                            Offstage(
                              offstage: !widget.loading,
                              child: getLoading(),
                            ),
                            Text('${widget.title}',style: TextStyle(color: getFontColor(),fontSize: Dimension(context).toPx(14))),
                          ],
                        )
                      ),
                    ),
                  ),
                ),
              ),
            )
          ],
        )
      ],
    );
  }

  getLoading(){
    if(widget.loadingMod == 'circle'){
      return Container(
        width: Dimension(context).toPx(12),
        height: Dimension(context).toPx(12),
        margin: EdgeInsets.only(right: Dimension(context).toPx(5)),
        child: CircularProgressIndicator(strokeWidth: 2,valueColor: AlwaysStoppedAnimation(Color(0xffc8c9cc)),backgroundColor: Color.fromRGBO(244, 244, 244, 1)),
      );
    }else{
      return Container(
        width: Dimension(context).toPx(12),
        height: Dimension(context).toPx(12),
        margin: EdgeInsets.only(right: Dimension(context).toPx(5)),
        child: CupertinoActivityIndicator(radius: 8),
      );
    }
  }

  getFontColor(){
    if(widget.color != null){
      return widget.color;
    }else{
      if(widget.plain){
        switch(widget.type){
          case 'default':
            return Color(0xff323233);
          case 'primary':
            return Color(0xff3c9cff);
          case 'success':
            return Color(0xff5ac725);
          case 'warning':
            return Color(0xfff9ae3d);
          case 'error':
            return Color(0xfff56c6c);
        }
      }else{
        switch(widget.type){
          case 'default':
            return Color(0xff323233);
          default:
            return Colors.white;
        }
      }
    }
  }

  getColor(){
    if(widget.plain){
      return Colors.transparent;
    }
    if(widget.color != null){
      return widget.color;
    }else{
      switch(widget.type){
        case 'default':
          return Colors.transparent;
        case 'primary':
          return Color(0xff3c9cff);
        case 'success':
          return Color(0xff5ac725);
        case 'warning':
          return Color(0xfff9ae3d);
        case 'error':
          return Color(0xfff56c6c);
      }
    }
  }

  getBorderColor(){
    if(widget.color != null){
      return widget.color;
    }else{
      switch(widget.type){
        case 'default':
          return Color(0xffebedf0);
        case 'primary':
          return Color(0xff3c9cff);
        case 'success':
          return Color(0xff5ac725);
        case 'warning':
          return Color(0xfff9ae3d);
        case 'error':
          return Color(0xfff56c6c);
      }
    }
  }

  getBorder(){
    double width = 1;
    if(widget.type == 'default'){
      width = 1;
    }else{
      if(widget.plain){
        width = 1;
      }else{
        width = 0;
      }
    }
    return width;
  }
}
